invoice type toggle

3 files changed, 45 insertions, 15 deletions

diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index ad9721e7..b5571f23 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -1,12 +1,14 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { send } from '$lib/socket';
-	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
+	import { post, back, copy, f, get, types, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image } from '$comp';
 	import { t } from '$lib/translations';
 	import screenfull from 'screenfull';
+	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
@@ -21,18 +23,19 @@
 		prompt,
 		text,
 		tip,
+		request_id,
 		user: { username, currency }
 	} = invoice;
 
 	let showQr = !amount;
 
-	let src = sm;
+	$: src = sm;
 
 	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		({ invoice, id } = data);
+		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
 			hash,
@@ -71,9 +74,43 @@
 		if (full) src = lg;
 		else src = sm;
 	};
+
+	let toggleType = async () => {
+		invoice.type = invoice.type === types.lightning ? types.bitcoin : types.lightning;
+		({ hash } = await post(`/${username}/invoice`, {
+			invoice,
+			user: { username, currency }
+		}));
+
+		goto(`./${hash}`, { invalidateAll: true });
+	};
 </script>
 
 <div class="container mx-auto max-w-lg px-4 space-y-5">
+	<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+			class:bg-black={type === types.lightning}
+			class:text-white={type === types.lightning}
+			on:click={toggleType}
+		>
+			⚡️ Lightning
+		</button>
+
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center "
+			class:bg-black={type === types.bitcoin}
+			class:text-white={type === types.bitcoin}
+			on:click={toggleType}
+		>
+			<img
+				src="/images/bitcoin.svg"
+				class="my-auto w-8 border-4 border-transparent"
+				alt="Bitcoin"
+			/>
+			<div class="my-auto">Bitcoin</div>
+		</button>
+	</div>
 	<div class="relative flex">
 		<div class="flex mx-auto w-[360px] h-[360px]">
 			<img
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 142be4c4..2068c306 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -180,14 +180,12 @@
 									</div>
 								</a>
 							{:else if p.with}
-								<a href={`/${p.with.username}`}>
-									<div class="flex">
-										<div class="my-auto">
-											<Avatar user={p.with} size={12} />
-										</div>
-										<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								<div class="flex">
+									<div class="my-auto">
+										<Avatar user={p.with} size={12} disabled={true} />
 									</div>
-								</a>
+									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								</div>
 							{:else if p.type === types.classic}
 								<img
 									src="/images/classic.png"
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 99d95be0..95495368 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -46,10 +46,5 @@
 		>
 			{amount ? $t('payments.next') : $t('payments.sendersChoice')}
 		</button>
-
-		<div class="w-full flex justify-center">
-			<span class="font-bold mr-2">{type[0].toUpperCase() + type.substring(1, type.length)}</span>
-			<Toggle id="prompt" checked={lightning} bind:value={lightning} />
-		</div>
 	</div>
 </form>